<template>
  <div class="listperson">
    <h1>人员列表</h1>
    <h1>1</h1>
        <table border="1" cellpadding="0" cellspacing="0" style="width:80%;margin:35px auto">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>职务</th>
          <th>薪资</th>
          <th>入职时间</th>
          <th>操作</th>
        </tr>
        <tr align="center" v-for="(item,index) in SelectVuex" :key="index">
          <td>{{index+1}}</td>
          <td>{{item.uname}}</td>
          <td>{{item.gender}}</td>
          <td>{{item.age}}</td>
          <td>{{item.port}}</td>
          <td>{{item.salary}}</td>
          <td>{{item.ctime}}</td>
          <td>
            <button @click="goEdit(index)">编辑</button>
            <button @click="del(index)">删除</button>
            </td>
        </tr>
    </table>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'

export default {
    name:"ListPerson",
    //事件函数，需要触发的
    methods:{
      ...mapMutations(['dellist']),
      //删除函数
      del(index){
        this.dellist(index);
      },
      //跳转到编辑页
      goEdit(index){         
        this.$router.push('/home/edit?i='+index);
      }
    },
    //计算属性内部的函数是自动执行且可以作为数据循环
    computed:{
      //获取vuex的state内部的数量
      ...mapState(['plist']),
      //如果不用快捷方法：this.$store.state.plist

      //对数据进行加工
      SelectVuex(){
        //备份
        let plist =this.plist;
        //遍历，数据加工
        for(let item of plist){
          item.gender=item.gender==0?'女':'男';
          //一个变量多种可能
          switch(item.port){
            case 1: item.port = '老板';break;
            case 2: item.port = '总经理';break;
            case 3: item.port = '部门主管';break;
            case 4: item.port = '组长';break;
            case 5: item.port = '员工';break;
          }
        }
        //新数据导出
        return plist;
      }
    }
}
</script>

<style scoped>
.listperson{
  text-align: center;
}
table{
  margin: auto;
}
</style>